<template>
  <div class="feedback">
    <div class="head-bg">
      <div class="banner">
        <div class="smile"></div>
        <p class="head-words title-words">用户体验提升计划</p>
        <p class="head-words">TO BUILD OUR BETTER SERVICE</p>
        <router-link to="/" class="back-choice" name="s_suning_report_fanhui">
          <i></i>
          <span>返回首页</span>
        </router-link>
      </div>
    </div>

    <div class="cont-wrap">
      <form action id="form-opinion">
        <div class="step step-hd">
          <p>功能操作不方便？使用时遇到系统问题？或有更好的功能建议？欢迎您随时提出来！</p>
        </div>
        <div class="step main-sel">
          <!-- title -->
          <h3 class="clearfix">
            <span class="title-must">*</span>
            <i class="title-icon">1.</i>
            <span class="title-span">您想对哪方面提出建议</span>
          </h3>
          <!-- 地址选择-->
          <ul class="ul-items step-cont clearfix">
            <li
              name="s_suning_report_leixing"
              v-for="(item,index) in Options"
              :key="index"
              data-type="index"
              @click="handoption(item)"
              :class="isIndex==item.id ? 'is-item' :'ul-item'"
            >
              {{item.name}}
              <i></i>
            </li>
          </ul>
        </div>
        <div class="step step-content">
          <!-- title -->
          <h3 class="clearfix">
            <span class="title-must">*</span>
            <i class="title-icon">2.</i>
            <span class="title-span">我们存在哪些不足</span>
          </h3>
          <!-- 输入框-->
          <el-input
            type="textarea"
            :rows="7"
            class="text-area step-cont"
            v-model="desc"
            placeholder="请将您的建议或您遇到的问题告诉我们，我们会认真听取并及时反馈"
          ></el-input>
          <!-- 数字提示报错 -->
          <div class="num-tips">
            <!-- 输入多少字提示-->
            <span class="text-num">
              <em class="num-current">{{descnum}}</em>/
              <em class="whole-num">500</em>
            </span>
          </div>
        </div>
        <div class="step step-image">
          <h3 class="clearfix">
            <i class="title-icon">3.</i>
            <span class="title-span">
              如果用图片来说明问题，请上传
              <em>（最多3张哦）</em>
            </span>
            <div class="error-place clearfix l hide" v-show="iserrImg==1">
              <i class="error-icon"></i>
              <span
                class="error-span"
                data-max="最多只能上传3张图片哦！"
                data-size="上传的图片大小不能超过5M哦！"
              >最多只能上传3张图片哦！</span>
            </div>
          </h3>
          <ul class="upload-img step-cont clearfix">
            <li v-for="(item,index) in picimgs" :key="index">
              <img class="uploadImg" :src="item" alt="index">
            </li>
            <li class="add-upload" name="s_suning_report_tupian" style="position: relative;">
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
              >
                <i
                  class="el-icon-plus avatar-uploader-icon"
                  v-loading="loading"
                  style="width: 100%;height:100%;"
                ></i>
              </el-upload>
            </li>
          </ul>
        </div>
        <div class="step cus-info">
          <h3 class="clearfix fine-tips">
            <i class="title-icon">4.</i>
            <span class="title-span">请留下您的信息，以便我们及时反馈</span>
          </h3>
          <dl class="contact clearfix step-cont">
            <dt class="js-contact-title">您的手机：</dt>
            <dd class="controls">
              <el-input type="number" class="cover-input" v-model="phone"></el-input>
            </dd>
            <!-- 报错位 [[ -->
            <dd class="error-place js-error-place clearfix down-error hide" v-if="isphone">
              <i class="error-icon"></i>
              <span class="error-span">请输入正确的手机格式！</span>
            </dd>
            <!-- 报错位 ]] -->
          </dl>
        </div>
        <div class="submit-btn clearfix step-cont">
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <div class="error-place clearfix l hide suberr">
            <i class="error-icon"></i>
            <span class="error-span">系统忙，请稍后再试。</span>
          </div>
        </div>
      </form>
    </div>

    <Footer></Footer>
  </div>
</template>
<script>
import Footer from "@/components/bottom/footer";
export default {
  name: "feedback",
  components: {
    Footer
  },
  data() {
    return {
      token:
        "Bearer eyJhbGciOiJIUzUxMiJ9.eyJleHAiOjE1NDcwMjc1MzcsImNyZWF0ZWQiOjE1NDY0MjI3Mzc3NzksInN1YiI6IjEzMjk3OTMyOTgyIn0.VD6Zg3KgBhoDrUQn82hT-CkblNR7mD78yXN4A-d8vIjnOqkG0XIbSLhpZ6VTjJpIEnWOnp6G2ky9_7-LM4rUXA",
      loading: false,
      Options: [
        {
          name: "享七网站",
          id: 1
        },
        {
          name: "享七商家客户端",
          id: 2
        },
        {
          name: "享七美食小程序",
          id: 3
        }
      ],
      picimgs: [
        "https://xq-1256079679.file.myqcloud.com/1535364539984test_AA819F30-FC0F-457C-A9F8-D9315A12D613_0.3.jpg"
      ],
      iserrImg: 0,
      phone: "",
      isphone: false,
      isIndex: 1,
      desc: "",
      descnum: 0
    };
  },
  watch: {
    desc: function() {
      if (this.desc.length > 500) {
        this.desc = this.desc.substring(0, 500);
      }
      this.descnum = this.desc.length;
    },
    phone: function() {
      console.log("his.phone:", this.phone.length);
      if (this.phone.length > 11) {
        this.phone = this.phone.substring(0, 11);
      }
      if (this.phone.length == 11) {
        const reg = /^[1][3456789][0-9]{9}$/;
        if (!reg.test(this.phone)) {
          this.isphone = true;
        }
      }
      if (this.phone.length < 11) {
        this.isphone = false;
      }
    }
  },
  methods: {
    init() {
      window.scrollTo(0, 0);
    },
    //点击某个分类
    handoption(e) {
      this.isIndex = e.id;
    },
    //图片上传之前检查
    beforeAvatarUpload(file) {
      const _this = this;
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      } else if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 1MB!");
      } else {
        _this.loading = true;
        let form = new FormData(),
          _this = this;
        form.append("file", file);
        form.append("userName", "13971489895");
        this.$axios
          .post("api/img/uploadMp4", form, {
            headers: {
              Authorization: this.token
            }
          })
          .then(res => {
            if (res.data.code == 0) {
              if (res.data.data.picUrl) {
                _this.loading = false;
                _this.picimgs.push(res.data.data.picUrl);
              }
            }
          });
      }
    },
    //提交
    onSubmit() {
      if (!this.isphone) {
        this.$message({
          message: "手机号码错误，请重新填写",
          type: "error"
        });
        this.isphone = "";
      }
      console.log(
        "isIndex:",
        this.isIndex,
        "desc:",
        this.desc,
        "phone:",
        "picimgs:",
        this.picimgs,
        "phone:",
        this.phone
      );
    }
  },
  mounted() {
    this.init();
  }
};
</script>


<style lang="less" scoped>
.head-bg {
  box-sizing: content-box;
  margin-bottom: 50px;
  position: relative;
  width: 100%;
  padding: 25px 0 25px;
  background: url("../../../../static/images/head_bg.png");
  text-align: center;
  .banner {
    .smile {
      width: 70px;
      height: 70px;
      margin: 0 auto;
      background: url(../../../../static/images/UEImprove_icons.png) no-repeat -112px -16px;
      display: inline-block;
      vertical-align: middle;
    }
    .title-words {
      margin-bottom: 10px;
      font-size: 24px;
    }
    .head-words {
      font: 16px "Microsoft YaHei";
      color: #fff;
    }
    p {
      display: block;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
    }
    .back-choice {
      display: block;
      width: 136px;
      height: 35px;
      font-family: "Microsoft YaHei";
      font-weight: normal;
      font-size: 14px;
      line-height: 35px;
      margin: 15px auto 0;
      background: #52bbff;
      border-radius: 18px;
      -webkit-transition: all 0.2s linear;
      transition: all 0.2s linear;
    }
    .back-choice i {
      float: left;
      margin-left: 15px;
      margin-top: 9px;
      width: 15px;
      height: 17px;
      background: url(../../../../static/images/head_point.png) no-repeat;
    }
    .back-choice span {
      float: left;
      margin-left: 14px;
      color: #fff;
    }
  }
}
.cont-wrap {
  position: relative;
  border: 1px solid red;
  max-width: 740px;
  margin: 50px auto;
  padding: 0 40px 5px;
  background: #fff;
  border: 1px solid #e4e6f0;
  box-shadow: 0 0 5px 0 #ddd;
  .step-hd {
    height: 69px;
    text-align: center;
    border-bottom: 1px #eaeaea dashed;
    color: #5d5d65;
    font: 14px "Microsoft YaHei";
    line-height: 2em;
    padding: 20px 0 10px;
  }
  .step {
    position: relative;
    margin-bottom: 30px;
    z-index: 1;
  }
  .step h3 {
    font: 14px/20px "Microsoft YaHei";
  }
  .main-sel .ul-items {
    height: 50px;
  }
  .step-cont {
    margin-top: 20px;
    margin-left: 25px;
  }
  .clearfix {
    zoom: 1;
  }
  .step h3 .title-must {
    float: left;
    margin: 2px 0 0 -6px;
    color: red;
  }
  .main-sel .ul-item,
  .cus-identify dd {
    position: relative;
    width: 130px;
    float: left;
    margin-right: 7px;
    text-align: center;
    font: 14px/42px "Microsoft YaHei";
    border: solid 1px #dce1e7;
    border-radius: 6px;
    background-color: #fdfdfd;
    cursor: pointer;
  }
  .main-sel .is-item {
    position: relative;
    width: 130px;
    float: left;
    margin-right: 7px;
    text-align: center;
    font: 14px/42px "Microsoft YaHei";
    border: solid 1px #409eff;
    color: #409eff;
    border-radius: 6px;
    background-color: #fdfdfd;
    cursor: pointer;
  }
  li,
  ol,
  ul {
    list-style: none;
  }

  .main-sel .ul-item i,
  .cus-identify dd i {
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 16px;
    width: 16px;
    background: url(../../../../static/images/UEImprove_icons.png) no-repeat 0 -90px;
  }

  .text-area {
    width: 693px;
    min-height: 148px;
    font: 12px/18px "Microsoft YaHei";
    color: #ccc;
    border-radius: 7px;
    overflow: auto;
  }
  .num-tips {
    position: absolute;
    top: 8px;
    right: 5px;
    font: 12px/20px "Microsoft YaHei";
  }
  .num-tips .text-num {
    float: left;
    color: #5d5d65;
    line-height: 34px;
  }
  .error-place {
    line-height: 20px;
    margin-left: 10px;
  }
  .error-place .error-icon {
    float: left;
    width: 20px;
    height: 20px;
    background: url(../../../../static/images/UEImprove_icons.png) no-repeat 0 -44px;
  }
  .error-place .error-span {
    float: left;
    margin-left: 5px;
    color: #f90;
  }
  .upload-img li {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    border-radius: 7px;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .upload-img .add-upload .avatar-uploader {
    display: block;
    width: 100px;
    height: 100px;
    background: url(../../../../static/images/UEImprove_icons.png) no-repeat -78px -90px;
  }
  .uploadImg {
    width: 96px;
    height: 96px;
    margin: 0 5px;
    float: left;
  }
  dl {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }
  .cus-info dl dt {
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    color: #5d5d65;
  }
  .contact .controls {
    position: relative;
    font: 12px/18px "Microsoft YaHei";
  }
  .cus-info dl dd {
    float: left;
    margin-right: 10px;
  }
  .contact dt {
    line-height: 32px;
  }
  .contact .controls input {
    width: 197px;
    padding: 7px 8px;
    border: 1px solid #ccc;
    color: #5d5d65;
    border-radius: 5px;
    line-height: 1;
  }

  .clearfix:after {
    content: ".";
  }
  .clearfix:after,
  .footer-dom {
    visibility: hidden;
  }
  .clear,
  .clearfix:after {
    display: block;
    height: 0;
    clear: both;
  }
  .submit-btn {
    .el-button {
      float: left;
    }
  }
  .suberr {
    display: inline;
    line-height: 40px;
  }
  .suberr i {
    margin-top: 10px;
    margin-left: 20px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    line-height: 12px;
    padding: 35px 17px 50px 17px;
    text-align: center;
  }
  .avatar {
    width: 308px;
    height: 178px;
    display: block;
  }
}
</style>

